<template>
  <div>
    <div class="punch-top">
      <h4 style="text-align: left; color: #126bff; margin-bottom: 20px">
        志愿者管理 接口未好
      </h4>
      <el-form
        id="punch"
        ref="elForm"
        :model="formData"
        size="medium"
        label-width="115px"
        style="overflow: hidden; display: flex; flex-wrap: wrap"
      >
        <el-form-item
          label="所属派出所 :"
          prop="department_id"
          style="width: 450px; float: left"
        >
          <!-- <el-input
            v-model="formData.ssjwsq"
            placeholder="请输入所属派出所"
            clearable
            :style="{ width: '65%' }"
          >
          </el-input> -->
          <div class="block">
            <el-cascader
              ref="xzCascade"
              placeholder="请选择或搜索所属行政区域"
              :options="optionsOne"
              :props="{ checkStrictly: true }"
              filterable
              :emitPath="emitPath"
              clearable
              style="float: left"
              :show-all-levels="false"
              v-model="formData.department_id"
              @change="handleChangexz"
              getCheckedNodes
              :style="{ width: '300px' }"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item
          label="护卫学校名称:"
          prop="dwmc"
          style="width: 450px; float: left"
        >
          <el-input
            v-model="formData.dwmc"
            placeholder="请输入护卫学校名称"
            clearable
            style="float: left"
            :style="{ width: '300px' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="申请人姓名:"
          prop="xm"
          style="width: 450px; float: left"
        >
          <el-input
            v-model="formData.xm"
            placeholder="请输入申请人打卡人姓名"
            clearable
            style="float: left"
            :style="{ width: '300px' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="身份证号码:"
          prop="xm"
          style="width: 450px; float: left"
        >
          <el-input
            v-model="formData.xm"
            placeholder="身份证号码"
            clearable
            :style="{ width: '300px' }"
            style="float: left"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="申请时段:"
          prop="time"
          style="width: 450px; float: left"
        >
          <el-date-picker
            type="daterange"
            v-model="formData.time"
            format="yyyy-MM-d"
            value-format="yyyy-MM-d"
            :style="{ width: '300px' }"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            clearable
            style="float: left"
          ></el-date-picker>
        </el-form-item>
        <el-form-item size="small " style="float: right">
          <el-button
            @click="resetForm()"
            style="background-color: #e6effa; color: #126bff"
            >重置</el-button
          >
          <el-button
            type="primary"
            @click="submitForm(formData)"
            style="color: #ffffff; background-color: #126bff"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="punch-content" style="width: 100%">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="100">
          <template slot-scope="scope">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="dwmc" label="护卫学校名称"> </el-table-column>
        <el-table-column prop="ssjwsq" label="所属派出所"> </el-table-column>
        <el-table-column prop="photo" label="照片">
          <template v-slot:default="scope">
            <img
              class="imgPhoto"
              style="width: 50px; height: 40px"
              :src="scope.row.photo"
            />
          </template>
        </el-table-column>
        <el-table-column prop="xm" label="姓名"> </el-table-column>
        <el-table-column prop="address" label="打卡地点" width="300">
        </el-table-column>

        <el-table-column prop="create_time" label="打卡时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >详情</el-button
            >
            <!-- <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 4, 8]"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes"
        :total="tableData.length"
        style="float: right; margin-top: 20px"
      >
      </el-pagination>
    </div>
    <!-- 详情弹窗 -->
    <div>
      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="550px"
        :before-close="handleClose"
        style="border-radius: 20px"
      >
        <div style="display: flex; flex-wrap: wrap; text-align: left">
          <div class="upIpfo">
            <p>护卫学校名称:{{ detaile.dwmc }}</p>
            <p>所属派出所:{{ detaile.ssjwsq }}</p>
          </div>
          <div class="upIpfo">
            <p>姓名：{{ detaile.xm }}</p>
            <p class="text">打卡时间:{{ detaile.create_time }}</p>
          </div>
          <div class="upIpfo">
            <p>打卡地点:{{ detaile.address }}</p>
            <p>
              照片：
              <img
                style="width: 50px; height: 50px; vertical-align: text-top"
                :src="detaile.photo"
                alt=""
              />
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { signLog, police } from "@/api/police";
import { Loading } from "element-ui";
export default {
  name: "punchLog",
  components: {},
  data() {
    return {
      // 级联选择框
      emitPath: false,
      selectId: {
        dpid: "",
      },
      optionsOne: [],
      currentPage4: 4,
      currentPage: 1,
      pageSize: 4,
      // 条件搜索表单
      formData: {
        xzqydm: "", // 所属行政区域
        ssjwsq: "", // 所属派出所
        department_id: "", //所属派出所id
        dwmc: "", // 单位名称
        xm: "", // 姓名
        time: "", // 时间
        // page: "1",
        // pagesize: "20",
      },
      // 将条件搜索表单中的time 转为开始时间  截止时间
      searchData: {
        xzqydm: "", //所属行政区域
        ssjwsq: "", //所属派出所
        dwmc: "", // 单位名称
        xm: "", // 上报人姓名
        begin_time: "", // 开始时间
        end_time: "", // 结束时间
        // page: "1",
        // pagesize: "20",
      },
      detaile: {}, // 详情
      tableData: [], // 表格数据存放
      dialogVisible: false,
      // 行政区域代码
      xzqydm: [
        {
          text: "安次区",
          value: "安次区",
        },
        {
          text: "广阳区",
          value: "广阳区",
        },
        {
          text: "经济开发区",
          value: "经济开发区",
        },
        {
          text: "永清县",
          value: "永清县",
        },
        {
          text: "香河县",
          value: "香河县",
        },
        {
          text: "三河县",
          value: "三河县",
        },
        {
          text: "固安县",
          value: "固安县",
        },
        {
          text: "霸州市",
          value: "霸州市",
        },
        {
          text: "文安县",
          value: "文安县",
        },
        {
          text: "大城县",
          value: "大城县",
        },
        {
          text: "大厂回族自治县",
          value: "大厂回族自治县",
        },
      ],
    };
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
    },
  },
  created() {},
  mounted() {
    this.initdata();
    this.initPolice();
  },

  methods: {
    // 数据初始化
    initdata() {
      let that = this;
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      signLog(this.searchData).then((res) => {
        if (res.code == 200) {
          loadingInstance.close();
          console.log(res);
          this.tableData = res.data.reverse();
          // const map = new Map();
          // const qc = res.data.filter(
          //   (key) => !map.has(key.create_time) && map.set(key.create_time, 1)
          // ); // 数据去重  // 打卡时间只精确到了分
          // console.log(qc);
          // this.tableData = qc;
          this.tableData.forEach((item, index) => {
            that.tableData[index].create_time = this.$moment(
              item.create_time * 1000
            ).format("YYYY-MM-DD HH:mm:ss");
            // console.log(moment(item.create_time * 1000).format("YYYY-MM-DD"));
          });
        }
      });
    },
    handleChangexz(e) {
      console.log(e[e.length - 1]);
      if (e[e.length - 1] != undefined) {
        this.formData.department_id = e[e.length - 1];
      } else {
        this.formData.department_id = "";
      }
      // console.log(e.pop());
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 级联选择器
    initPolice() {
      let that = this;
      this.selectId.token = this.$VueCookies.get("token");
      police(this.selectId).then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.children.forEach((item) => {
            item.label = item.label.slice(6);
            item.children.forEach((m) => {
              m.label = m.label.slice(9);
            });
          });
          that.optionsOne.push(res.data);
          // that.optionsOne.children = ;
        } else if (res.code == 401) {
          alert(res.message);
        }
      });
    },
    // 将搜索条件格式处理
    formToSearch(formData) {
      // this.searchData.xzqydm = formData.xzqydm;
      this.searchData.ssjwsq = formData.ssjwsq;
      this.searchData.dwmc = formData.dwmc;
      this.searchData.xm = formData.xm;
      this.searchData.token = this.$VueCookies.get("token");
      if (formData.time == "" || formData.time == null || formData.time == []) {
        this.searchData.end_time = "";
        this.searchData.begin_time = "";
      } else {
        this.searchData.end_time = formData.time[1];
        this.searchData.begin_time = formData.time[0];
      }
      return this.searchData;
    },
    submitForm(formData) {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      console.log(this.formToSearch(formData));
      let that = this;
      signLog(this.formToSearch(formData)).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.tableData = res.data;
          this.currentPage = 1; // 重置到第一页
          loadingInstance.close();
          const map = new Map();
          const qc = res.data.filter(
            (key) => !map.has(key.create_time) && map.set(key.create_time, 1)
          ); // 数据去重
          console.log(qc);
          this.tableData = qc;
          this.tableData.forEach((item, index) => {
            that.tableData[index].create_time = that
              .$moment(item.create_time * 1000)
              .format("YYYY-MM-DD HH:mm:ss");
            // console.log(moment(item.create_time * 1000).format("YYYY-MM-DD"));
          });
        }
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
      this.initdata();
      // this.tableData = this.initTableData;
    },
    handleClick(row) {
      console.log(row);
      this.dialogVisible = true;
      this.detaile = row;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      // console.log(`当前页: ${val}`);  // 分页功能
      // // if(val == )
      // console.log(this.tableData.length / this.pageSize);
      // console.log(Math.ceil(this.tableData.length / this.pageSize));
      // if (Math.ceil(this.tableData.length / this.pageSize) == val) {
      //   console.log("最后一页");
      //   this.searchData.pagesize = parseInt(this.searchData.pagesize) + 20;
      //   this.initdata();
      // }
      // this.currentPage = val;
    },
  },
};
</script>
<style scoped lang="scss">
#punch {
  /deep/.el-form-item__content {
    margin-left: 0px !important;
  }
}
.punch-top {
  // border: 1px red solid;
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: flex-start;
  box-sizing: border-box;
}
// .punch-top {
//   width: calc(100%);
// }
// .auto-width {
//   width: "auto";
// }
.el-table {
  width: calc(100%);
}
.punch-top /deep/[data-v-21354b7e] .el-form-item__content {
  border: none;
  width: auto;
  padding-left: 20px;
}
/deep/.el-form-item__label {
  // border: 1px red solid;
  width: 104px !important;
}
.punch-content {
  margin-top: 20px;
  // border: 1px red solid;
  height: 500px;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.el-table .el-table__cell {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: center;
}
.upIpfo {
  display: flex;
  width: 100%;
  // border: 1px red solid;
  justify-content: space-between;
}
/deep/.imgPhoto {
  display: inline;
  vertical-align: text-top !important;
}
.upIpfo p {
  color: #13213b;
  font-size: 14px;
  font-weight: 400;
  width: 50%;
  margin-top: 10px;
  // border: 1px red solid;
  display: inline-block;
  // background-color: skyblue;
}
/deep/.el-table__header-wrapper {
  // border: 1px red solid !important;
  border-radius: 10px 10px 0 0;
}
/deep/.el-table {
  border: 1px #d7dbe3 solid;
  border-radius: 10px;
}
/deep/.has-gutter tr th {
  color: black;
  text-align: center;
  border: 1px d7dbe3 solid;
  background-color: #ecf5ff;
}

/deep/.is-leaf {
  border: 1px #d7dbe3 solid !important;
  border-top: none !important;
  border-left: none !important;
}
/deep/.el-table__cell {
  text-align: center !important;
}
// /deep/.el-table__row {
//   border: 1px red solid !important;
// }
/deep/.el-dialog {
  border-radius: 15px !important;
}
/deep/.el-dialog__header {
  text-align: left;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 0 20px 20px 20px !important;
}
// /deep/.el-dialog__body tbody > .el-table__row {
//   color: red !important;
//   /deep/.el-table_1_column_5 {
//     color: red !important;
//   }
// }
// /deep/.el-range-editor.el-input__inner {
//   position: relative !important;
// }
/deep/.el-input__inner {
  border: 1px solid #d7dbe3 !important;
  background-color: white !important;
}
// el-table_1_column_5   el-table__cell
.rowText {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*第几行裁剪*/
  -webkit-box-orient: vertical;
}
</style>
